<script setup>
import { ref, watch } from "vue";

const active = ref(0);
const tabList = ref([
	{ title: "患者信息", id: 1 },
	{ title: "病情评估", id: 2 },
	{ title: "治疗处理", id: 3 },
	{ title: "材料清单", id: 4 },
]);
const value = ref("");
const message = ref("");
const imgs = ref(["https://oss.dingdongdr.com/static/enter/doctor2.png"]);
watch(imgs, (newValue, oldValue) => {
	console.log(1, newValue);
});
</script>

<template>
	<van-tabs v-model:active="active" line-width="6vw" color="#5288f4">
		<van-tab v-for="item in tabList" :key="item.id" :title="item.title">
			<div class="custom-1 m-[10px] overflow-hidden rounded-[10px] bg-white">
				<van-field v-model="value" label="姓名" placeholder="请输入" input-align="right" />
			</div>
			<div class="custom m-[10px] rounded-[10px] bg-white p-[10px]">
				<div class="mb-[10px] border-b pb-[6px]">病情描述</div>
				<van-field v-model="message" rows="3" autosize type="textarea" placeholder="请输入留言" />
			</div>
			<div class="custom m-[10px] rounded-[10px] bg-white p-[10px]">
				<div class="mb-[10px] border-b pb-[6px]">伤口照片</div>
				<div class="mt-[10px] rounded-[6px] bg-[#f7f9fa] p-[10px]">
					<UploadImg v-model:list="imgs" />
				</div>
			</div>
			<div v-for="item in 6" :key="item" class="custom-1 m-[10px] overflow-hidden rounded-[10px] bg-white">
				<SelectPicker />
			</div>
			<div class="p-[20px]"></div>
		</van-tab>
	</van-tabs>
</template>

<style lang="scss" scoped>
.custom-1:deep(.van-cell) {
	padding: 10px;
}

.custom :deep(.van-cell) {
	padding: 0;
	.van-cell__value {
		flex: 3;
	}
	.van-field__control {
		background: #f7f9fa;
		border-radius: 6px;
		padding: 2px 8px;
	}
}
</style>
